<template>
  <div>
      <div class="searchDiv">
          <div class="title">{{$t('analyzeData.shijianxingwei')}} {{timeLimit}}</div>
          <div v-show="weixin">
          <el-table
                :data="tableData"
                border
                ref="tableRef1"
                height="60vh"
                style="width: 100%">
                <el-table-column prop="contactavatar" :label="$t('analyzeData.lianxirenxingwei')">
                  <template slot-scope="scope">
                    <img width="80" height="80" :src="scope.row.contactavatar" alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="contactname" :label="$t('analyzeData.lianxireninfo')">
                    <template slot-scope="scope">
                      <div>{{scope.row.contactname}}</div>
                      <div>{{scope.row.contactnick}}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="contant" label="消息内容" :show-overflow-tooltip="true"  width="500">
                  <!-- 微信聊天解析 -->
                  <template class="tem"  slot-scope="scope">

        <div v-if="scope.row.msgtype==-1012" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{scope.row.contant}}
      </div>
      <div v-else-if="scope.row.msgtype==10000 || scope.row.msgtype==10002 || scope.row.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
      <div :title="formateHongBaoSystem(scope.row)">{{formateHongBaoSystem(scope.row)}}</div>
      </div>
      <!--   -->
      <div v-else-if="scope.row.msgtype==268445456" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{scope.row.contant}}
      </div>
      <!-- Right --> <!-- 视频 -->
      <div v-else-if="scope.row.msgtype==43" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
        <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
        <div style="text-indent: 0px;">
          <div class="demo-image__preview">
            <video width="100%" controls :src="scope.row.respath"></video>
          </div>
        </div>
      </div>
        <!-- Right --> <!-- 文本 -->
        <div v-else-if="scope.row.msgtype==1 ||scope.row.msgtype==808180  || scope.row.msgtype==822083633"  class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <span style="word-wrap: break-word;">
              {{scope.row.contant}}</span>
          </div>
        </div>
        <!-- Right --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
        <div v-else-if="(scope.row.msgtype==49 || scope.row.msgtype==419430449 || scope.row.msgtype==436207665) && indexOfFunction(scope.row.contant)!==-1" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          
          <div v-if="formateHongBao(scope.row).html" style="text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
              <span> 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
              <span class="viewsInfoDetailsMessages(scope.row)" @click="viewsErroMessagesDetails(scope.row)">{{$t('analyzeData.views')}}</span>
            </div>
          </div>
          
          <div v-else-if="formateHongBao(scope.row).msg.appmsg.type==2001 || scope.row.msgtype==436207665" style="background:#fff;text-indent: 0px;position: relative;" >
             
            <img src="../../../assets/images/weChatQQ/hongbaoright.png" width="100%" height="100%" alt="">
          </div>
          <div v-else-if="formateHongBao(scope.row).msg.appmsg.type==2000 || scope.row.msgtype==419430449" style="background:#fff;text-indent: 0px;position: relative;" >
              <div v-if="formateHongBao(scope.row).msg.appmsg.wcpayinfo.paysubtype==8" class="hongbaotext">{{$t('analyzeData.zhuanzhang')}}{{formateHongBao(scope.row).msg.appmsg.wcpayinfo.feedesc}}</div>
              <div v-if="formateHongBao(scope.row).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">{{$t('analyzeData.tuihuan')}}{{formateHongBao(scope.row).msg.appmsg.wcpayinfo.feedesc}}</div>
              <div v-if="formateHongBao(scope.row).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">{{$t('analyzeData.shoudaozhuanzhang')}}{{formateHongBao(scope.row).msg.appmsg.wcpayinfo.feedesc}}</div>

            <div v-if="formateHongBao(scope.row).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">{{$t('analyzeData.yibeituihuan')}}{{formateHongBao(scope.row).msg.appmsg.wcpayinfo.feedesc}}</div>
            <div v-if="formateHongBao(scope.row).msg.appmsg.wcpayinfo.paysubtype==1" class="hongbaotext">{{$t('analyzeData.zhuanzhang')}}{{formateHongBao(scope.row).msg.appmsg.wcpayinfo.feedesc}}</div>

            <img src="../../../assets/images/weChatQQ/rightzhuanzhangright.png" width="100%" height="100%" alt="">
          </div>
          <div v-else-if="formateHongBao(scope.row).msg.appmsg.type==5" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(scope.row).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(scope.row).msg.appmsg.title">{{formateHongBao(scope.row).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(scope.row).msg.appmsg.des">{{formateHongBao(scope.row).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                  </div>
                </div>
                <div class="textInfo">分享链接</div>
              </div>
            </a>
          </div>
          <div v-else-if="formateHongBao(scope.row).msg.appmsg.type==17" style="background:#b2e281;text-indent: 0px;position: relative;" >
          <div >
            <div class="chat-right_triangle"></div>
            <span>
              {{formateHongBao(scope.row).msg.appmsg.title}} <i class="el-icon-location-outline"></i></span>
          </div>
          </div>
          <div v-else-if="formateHongBao(scope.row).msg.appmsg.type==33" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(scope.row).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(scope.row).msg.appmsg.title">{{formateHongBao(scope.row).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(scope.row).msg.appmsg.des">{{formateHongBao(scope.row).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                  </div>
                </div>
                <div class="textInfo">小程序</div>
              </div>
            </a>
          </div>
          <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
                <span @click="viewsErroMessagesDetails(scope.row)"> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                <span class="viewsInfoDetailsMessages" style="position: relative;left:-270px;" >查看详情</span>
              </div>
          </div>
        </div>
        <!-- Right --> <!-- 图片 -->
        <div v-else-if="scope.row.msgtype==3 || scope.row.msgtype==2 || scope.row.msgtype==47" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="demo-image__preview">
              <el-image
                      style="width:300px; height:200px"
                      :src="formateImg(scope.row)"
                      >
                  </el-image>
              </div>
          </div>
        </div>
        <!-- Right --> <!-- 语音 -->
          <div v-else-if="scope.row.msgtype==34" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
             
            <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div class="yuyin" @click="detailsAuideInfo(scope.row)">
              <span class="infoYuYin"  title=""></span>
              <div class="chat-right _triangle"></div>
              <span><i class="iconfont icon-saying"></i> 语音气泡</span>
            </div>
          </div>
        <!-- Right --> <!-- 语音通话 -->
        <div v-else-if="scope.row.msgtype==50" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
             
            <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div>
              <div class="chat-right_triangle"></div>
              <span v-if="scope.row.contant=='voip_content_voice'">语音通话</span>
              <span v-else-if="scope.row.contant=='voip_content_video'">视频通话</span>
              <span v-else>{{formateAudioCall(scope.row).text}}<i style="margin-left:15px;font-weight:1000;" :class="formateAudioCall(scope.row).icon"></i></span>
            </div>
        </div>
        <!-- Right --> <!-- 名片 -->
        <div v-else-if="scope.row.msgtype==42" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="background:#fff;text-indent: 0px;">
            <div class="nameCard" @click="viewsFriendCard(formateCard(scope.row).msg)">
              <div class="contentNameCard">
                <img  height="" :src="formateCard(scope.row).msg._bigheadimgurl" alt="">
                <div class="nameCardNameTExt">{{formateCard(scope.row).msg._nickname}}</div>
              </div>
              <div class="nameSiren" style="text-algin:left ! important;">个人名片</div>
            </div>
          </div>
        </div>
        <!-- right --> <!-- 转发聊天记录 -->
        <div v-else-if="(scope.row.msgtype==353 || scope.row.msgtype==-19 ||scope.row.msgtype==49) && scope.row.contant.indexOf('<msg>')==-1" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;" @click="viewsMessageFriendList(messageRemrd(scope.row.contant))">
            <span class="titleMessageBoxBox" :title="messageRemrd(scope.row.contant).desc">{{messageRemrd(scope.row.contant).desc}}</span>
            <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
            <p>{{messageRemrd(scope.row.contant).desc}}</p>
            </div>
            <div class="bottomName">聊天记录</div>
          </div>
        </div>
        <!-- right --> <!-- 文件 -->
        <div v-else-if="scope.row.msgtype==5 || scope.row.msgtype==1090519089" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          
          <div v-if="scope.row.respath" style="background:#fff;text-indent: 0px;">
            <div class="nameCard"  @click="downLoadFile(scope.row.respath)">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">{{scope.row.contant}}</div>
              </div>
              <div class="nameSiren">点击打开文件</div>
            </div>
          </div>
            <div v-else style="background:#fff;text-indent: 0px;" :title="scope.row.contant">
            <div class="nameCard">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">暂无文件路径</div>
              </div>
               
            </div>
          </div>
        </div>

        <!-- Right --> <!-- 位置 -->
        <div v-else-if="scope.row.msgtype==48" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="map">
                <div class="mapTitle">
                      <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(scope.row)._poiname}}</div>
                      <span style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(scope.row)._label}}</span>
                  </div>
                  <p class="mapBox">
                      <position style="float:none;" v-if="formdatePosition(scope.row)" :position="formdatePosition(scope.row)"/>
                  </p>
              </div>
          </div>
        </div>

  <!-- 无法解析单独显示 -->
        <div v-else class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
           
          <div>{{scope.row.sendername}}<span style="margin-left:.05rem;">：</span> <span style="color:red;" v-if="scope.row.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
          <div style="text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
                <span @click="viewsErroMessagesDetails(scope.row)"> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                <span class="viewsInfoDetailsMessages" style="position: relative;left:6%;" @click="viewsErroMessagesDetails(scope.row)">查看详情</span>
              </div>
          </div>
          </div>
        </div>
        </template>
                </el-table-column>
                <el-table-column prop="msgtime" label="消息时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.msgtime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
          </div>
  
            <!-- sms -->
            <div v-show="sms">
            <el-table
                :data="tableDataSms"
                border
                ref="tableRef2"
                height="60vh"
                style="width: 100%">
                <el-table-column prop="phone" label="手机号">
                </el-table-column>

                <el-table-column prop="content" label="消息内容" :show-overflow-tooltip="true"  width="700"></el-table-column>
                <el-table-column prop="smstime" label="消息时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.smstime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
            </div>
   
            <!-- 通话记录 -->
            <div v-show="callR">
              <el-table
                :data="callRData"
                ref="tableRef3"
                border
                height="60vh"
                style="width: 100%">
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="手机号">
                </el-table-column>
                <el-table-column prop="duration" label="通话时长（秒）" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="smstime" label="时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.calltime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
            </div>
                        <!-- 通话记录 -->
            <div v-show="qq">
              <el-table
                :data="tableDataQQ"
                ref="tableRef3"
                border
                height="60vh"
                style="width: 100%">
                <el-table-column prop="name" label="联系人头像">
                  <template slot-scope="scope">
                      <img width="80" height="80" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+scope.row.contactname+'&spec=100'" alt="">
                  </template>

                </el-table-column>
                <el-table-column prop="contactnick" label="联系人昵称">
                  <template slot-scope="scope">
                    <p>{{scope.row.contactnick}}</p>
                    <p>{{scope.row.contactname}}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="sendernick" label="发送者昵称">
                  <template slot-scope="scope">
                    <p>{{scope.row.sendernick}}</p>
                    <p>{{scope.row.sendername}}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="contant" label="消息内容" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="smstime" label="时间">
                  <template slot-scope="scope">
                    {{formateDate(scope.row.msgtime)}}
                  </template>
                </el-table-column>
                <el-table-column prop="recovery" label="是否删除">
                  <template slot-scope="scope">
                    <span v-if="scope.row.recovery==1">已删除</span>
                    <span v-else>未删除</span>
                  </template>
                </el-table-column>
            </el-table>
            </div>
       
      </div>
      <!-- 事件行为dialog -->
    <a-modal
      v-model="dialogVisible"
      title="Vertically centered modal dialog"
      centered
      @ok="handleOk"
    >
      <p>some contents1</p>
      <p>some contents2</p>
      <p>some contents3</p>
    </a-modal>

        <!-- 无法解析消息类型详情 -->
      <a-modal
      v-model="erroMessageModel"
      :footer="null"
      title="消息详情"
      :maskClosable="false"
      centered
      @ok="() => (erroMessageModel = false)"
    >
    <div v-if="unKnowData">
      {{unKnowData.contant}}
    </div>
    </a-modal>

    <!-- 查看语音包Message详情 -->
    <a-modal
      title="语音详情"
      :maskClosable="false"
      :footer="null"
      width="32%"
      :visible="visibleAudio"
      @cancel="handleCancel"
    >
    <div class="audioBox">
      <div class="pathBox">
        <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
          <audio ref="audioDom" :src="codeSrc" controls></audio>
          时间：{{formDate(audioData.msgtime)}}
          <el-button size="small" style="margin-left:20px;" @click="playAudioFile(audioData.respath)" v-html="html"></el-button>
        </div>
        <div class="itemAudio" style="border-bottom-right-radius: 5px;">
          <i class="el-icon-document-copy copy" @click.stop="copyAddress(audioData.respath)" title="复制" style="margin-right:10px;"></i>本地路径：{{audioData.respath}}
        </div>
      </div>
    </div>
    </a-modal>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import loadingTem from '../../mainComponents/loading/index.vue'
import position from '../../mainComponents/map/position.vue'
import { openFilePosition } from '@/api/openFile/open_File'
import { getFormateCode } from '@/api/media/media_api'
const x2js=require('x2js');
const x2jsone=new x2js(); //实例
export default {
    name:'allSearch',
    props:['timeLimit','tableDataInfo'],
    components:{
        loadingTem,
        position
    },
    data(){
        return{
        html:'',
        audioData:'',
        visibleAudio:false,
        codeSrc:'',
        unKnowData:'',
        erroMessageModel:false,
        dialogVisible:false,
        total:0,
        page:1,
        limit:20,
        tableData: [

        ],
        srcList:[],
        tableDataSms:[],
        callRData:[],
        list:[],
        tableDataQQ:[],
        tableTitleDictionary:[
          {value:'dictionary',name:'头像'},
          {value:'contactname',name:'接收者账号'},
          {value:'contactnick',name:'接受者名称'},
          {value:'contant',name:'内容'},
          {value:'issend',name:'消息类型'},
          {value:'msgtime',name:'时间'},
          {value:'recovery',name:'是否删除'},
          {value:'sendername',name:'发送者名称'},
          {value:'sendernick',name:'发送者账号'},
        ],
        weixin:false,
        sms:false,
        callR:false,
        qq:false
        }
    },
    created(){
    },
    methods:{
    // 播放语音
    playAudioFile(url){
      this.html=`正在转码请稍后...<i class="el-icon-loading"/>`
      let data={
        mediaPath:url.respath,
        mediaType:1
      }
      getFormateCode(data).then(res=>{
      this.html=`转码完成<i class="el-icon-check"/>`
        this.codeSrc=res.data[0].direction

      }).catch(err=>{
      })
    },
        handleCancel(e) {
      this.visibleAudio = false;
    },
    detailsAuideInfo(item){
      this.html="点击转码"
      this.audioData=item
      this.codeSrc=''
      this.visibleAudio=true
    },
    // 打开文件
    downLoadFile(path){
      let data={
        filePath:path
      }
      openFilePosition(data).then(res=>{

      })
    },
          // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item){
      this.unKnowData=item
      this.erroMessageModel=true
    },
    initStr(str){
      let data=JSON.parse(str)
      return data
    },
  indexOfFunction(str){
    return str.indexOf('<msg>')
  },
  copyAddress(valueData) {
	let oInput = document.createElement("input");
	oInput.value = valueData;
	document.body.appendChild(oInput);
	oInput.select();
	document.execCommand("Copy");
	oInput.remove();
	this.$message({
		message: "复制成功",
		type: "success",
	});
},

    onSearchStart(){
      this.offset=1
      this.onSearch()
    },
    formateYinyongMessage(item){
      let data=JSON.parse(item)
    },
    // 格式化转发聊天记录
    messageRemrd(item){
      try {
        let reg = /\\/g;
        let str=item.replace(reg,'');
        return JSON.parse(str)
      } catch (error) {
        let data={
          desc:'无法解析'
        }
        return data
      }
    },
    // 下载文件
    downLoadFile(path){
      let data={
        filePath:path
      }
      openFilePosition(data).then(res=>{

      })
    },
    // 格式化位置信息
    formdatePosition(item){
      let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        try{
          return xmlDo.msg.location
        }catch(err){

        }
    },
    // 格式化名片分享
    formateCard(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
    //格式化语音通话
    formateAudioCall(item){
        try{
        if(item.contant.indexOf('recvtime')>0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0]==0){
          let data={
            text:'视频通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-video-camera'
          }
          return data
        }else{
          let data={
            text:'语音通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-phone-outline'
          }
          return data
        }
        }catch(err){
                    let data={
            text:'未知的语音或视频通话',
            icon:'el-icon-question'
          }
          return data
        }
    },
    // 格式化红包
    formateHongBao(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
        formateHongBao111(item){
          try{
      let xml=item.contant;
          xmlDo=x2jsone.xml2js(xml);
          return xmlDo
          }catch(err){
            let data={
              msg:{
                appmsg:{
                  type:5,
                  title:'暂无',
                  url:''
                }
              }
            }
            return data
          }
   
    },
    // 收红包
    formateHongBaoSystem(item){
      if(item.contant.indexOf('img')==-1){
        return item.contant
      }else{
        return item.contant.replace(/[^\u4e00-\u9fa5]/gi,"")
      }
    },
    // 格式化图片路径
    formateImg(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
      if(item.respath==''){
        try{
            return xmlDo.msg.emoji._cdnurl
          }catch(err){
            // return
          }
      }else{
        return item.respath
      }
    },
    formDate(date){
      return parseTime(date)
    },
    formateDate(date){
      return parseTime(date)
    },
    formateTableTitle(item){
      this.tableTitleDictionary.forEach(element=>{
        if(item == element.value){
          return element.name
        }
      })
    },
      // 获取表头数组
      initTableData(classTitle){
          this.weixin=false
          this.sms=false
          this.callR=false
          this.qq=false
        let classData=''
        classData=sessionStorage.getItem('tableClass')
        this.tableData=[]
        this.tableDataSms=[]
        this.callRData=[]
        if(classTitle=='微信'){
        this.$refs.tableRef1.bodyWrapper.scrollTop=0
          this.sms=false
          this.callR=false
          this.qq=false
          this.tableData=this.tableDataInfo
          this.weixin=true

        }else if(classTitle=='短信'){
        this.$refs.tableRef2.bodyWrapper.scrollTop=0
          this.weixin=false
          this.callR=false
          this.qq=false
          this.sms=true
          this.tableDataSms=this.tableDataInfo
        }else if(classTitle=='QQ'){
        this.$refs.tableRef2.bodyWrapper.scrollTop=0
          this.weixin=false
          this.callR=false
          this.sms=false
          this.qq=true
          this.tableDataQQ=this.tableDataInfo
        }
        else{
        this.$refs.tableRef3.bodyWrapper.scrollTop=0
          this.sms=false
          this.weixin=false
          this.callRData=this.tableDataInfo
          this.callR=true
        }
      },
      handleClick(row){
          this.dialogVisible=true
      },
      handleOk(){

      },
      handleSizeChange(val) {
        this.limit=val
      },
      handleCurrentChange(val) {
        this.page=val
      }
    }
}
</script>
<style>
.el-tooltip__popper {
  max-width: 800px;
}
.cell el-tooltip{
  width: auto !important;
}
</style>
<style scoped>
.block{
    margin-top: 10px;
}
.searchDiv{
    width: 99%;
    min-height:485px;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding: 20px;
}
.title{
    height: 50px;
    font-size: 20px;
    font-weight: bold;
}
</style>

<style scoped>
.mapBox{
    width: 300px;
    height: 80px;
    /* float: left; */
}
.tem{
  position: relative;
}
.copy{
  font-size: 20px;
  cursor: pointer;
}
.copy:hover{
  color: #409eff;
}
.loadingBox{
  position: relative;
  top: 40px;
  z-index: 100;
  text-align: center;
  line-height: 100px;
}
#systemTips{
  text-align: center;
  margin-bottom:10px !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}
.nameCardNameTExt{
  margin-left: 20px;
}
.viewsInfoDetailsMessages{
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
}
.viewsInfoDetailsMessages:hover{
  color: #0616f5;
}
.cardContent{
  height: 100px;
  display: flex;

}
.cardTextInfo{
  padding-left: 20px;
}
.cardTextInfo>p{
  margin-bottom: 3px;
  font-size: 14px;
}
.grefTitleSpan{
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hrefBox{
  width: 250px;
  height:47px;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: 50px;
}
.hrefBoxLeftBox{
  width: 180px;
}

.hrefBoxrightBox{
  width: 40px;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.block{
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}
.listBox{
  display: block;
  min-height: 700px;
  overflow-y: auto;
}
.chatRecordDate{
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}
.chatRecordContentLeft{
  height: 60px;
  width: 290px;
  padding-left: 20px;
}
.friendNamesContent{
    overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.friendNames{
  height: 30px;
  line-height: 30px;
}
.chatRecordContent{
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}
.chatRecord{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.friendAvatar{
  width: 60px;
  height: 60px;
}
.bottomName{
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}
.titleMessageBoxBox{
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
p{
  margin: 0;
}
#playAudio{
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.bottomBorder{
  border-bottom: 1px solid rgb(224, 224, 224);
}
.AudioLogo{
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: 60px;
  width: 412px;
  background: #f3f3f3;
  width: 100%;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*text-overflow:ellipsis;*/
  /*white-space: nowrap;*/
  word-wrap: wrap;
}
.pathBox{
  height: 100px;
  width: 100%;
  font-size: 12px;
}
.audioBox{
  width: 100%;
  height: 150px;
  display: flex;
  padding: 0 15px;
}
.infoYuYin{
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}
.infoYuYin:hover{
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin{
  cursor: pointer;
  position: relative;
  width: 60%;
}
.nameSiren{
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard{
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 250px;
  height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}
.fenyeqi{
  /* float: left; */
  margin-top: 10px;
}
.mainContentBoxMessage{
  height: 500px;
}
.mapBox{
    width: 100px;
    height: 80px;
    /* float: left; */
}
.mapTitle{
    width: 100%;
    height: 50px;
    padding: .03rem;
    float: left;

}
.map{
    width: 233px;
    height: 206px;
    background: #fff;
    border-radius: 4px;
}
.messageImg{
    display: block;
    width: 100%;
    height: 100%;
}
.chat-sender{
 margin-top: 0 !important;
}
.messageBoxFather{
    width: 429px;
  min-width:429px;
  max-height: 785px;

}
.messageBox {
    margin:0 auto;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    height: 81vh;
    overflow-y: auto;
    border-radius: 5px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.friendName {
  line-height: 22.39px;
  font-size:13px;
}
</style>

<style scoped>
.leftMessage{

}
/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}
.chat-sender {
  clear: both;
  font-weight: bold;
}
.chat-sender div:nth-of-type(1) {
  float: left;
}
.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: left;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}
.chat-receiver div:nth-of-type(1) {
  /* float: right; */
}
.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  /* text-align: right; */
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 250px;
  /* background-color: #b2e281; */
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext{
  width: 100px;
  position: absolute;
  right: 50px;
  top: 30px;
  color: #Fff;
  font-size: 12px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren{
  height: 0.06rem;
  width: 1rem;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: .07rem;
}

.contentNameCard{
  height: 0.24rem;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 1rem;
  height: .31rem;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  width: 150px;
  right: .15rem;
  top: .1rem;
  color: #Fff;
font-size: 13px;
}
  .messageBox {
    margin:0 auto;
    width: 1.7rem;
    height: 5rem;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    /* height: 4.54rem; */
    max-height: 81vh;
    /* height: auto; */
    /* height: 600px; */
    overflow-y: auto;
    border-radius: 5px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 1.1rem;
  background-color: #b2e281;
  margin: 0px 10px 10px 20px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 1.1rem;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}
.map{
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
}

.mapTitle{
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
}
.friendName {
  line-height: 0.1rem;
  font-size: 0.07rem;
}
.messageContentTitle {
  height: 0.3rem;
  width: 1.7rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(230, 230, 230);
  margin-bottom: 10px;
}
.messageBoxFather{
  width: 1.1rem;
  min-width:403px;

}
.AudioLogo{
  position: relative;
  width: .5rem;
  height: .5rem;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  min-height: .25rem;
  width: 412px;
  background: #f3f3f3;
  padding: .06rem;
  display: flex;
  align-items: center;
  /* overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap; */
  word-wrap: break-word

}
.pathBox{
  height: .5rem;
  width: 100%;
}
.audioBox{
  width: 100%;
  height: .5rem;
  display: flex;
  padding: 0 .1rem;
}
.hrefBox{
  width: 1rem;
  height:.2rem;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: .2rem;
}
.hrefBoxLeftBox{
  width: .8rem;
}

.hrefBoxrightBox{
  width: .2rem;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: .7rem;
  height: .2;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 1rem;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.grefTitleSpan{
  display: block;
  width: .7rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#playAudio{
  position: absolute;
  font-size: .16rem;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.screenBox{
  height: 85vh;
  background: #fff;
  overflow: hidden;
}
}
</style>
